<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<html>
<head>
    <%@ include file="/common.jsp" %>
    <title>添加收款码</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/phone.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/demos.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/aui/css/aui.css"/>

    <link rel="stylesheet" type="text/css" href="${ctx }/css/weui.min.css"/>
    <%--<link rel="stylesheet" type="text/css" href="${ctx }/css/jquery-weui.css"/>--%>
</head>

<body>
<input type="hidden" id="merchantNo" value="${merchant.merchantNo}" name="merchantNo">

<section class="aui-content">
    <ul class="aui-list">
        <li class="aui-list-item   ">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">所属店铺</div>
                <div class="aui-list-item-inner  ">${merchant.shopname}</div>
            </div>
        </li>
        <li class="aui-list-item   ">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">所属用途</div>
                <div class="aui-list-item-inner">
                    <input type="text" id="bankNamePhone" readonly="readonly" onfocus="this.blur()" name="bankNamePhone"
                           placeholder="请选择所属用途">
                    <input type="hidden" id="bankId" name="bankId">
                </div>
            </div>

        </li>
        <li class="aui-list-item   ">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">所属用户</div>
                <div class="aui-list-item-inner">
                    <input type="text" id="namePhone" readonly="readonly" onfocus="this.blur()" name="namePhone"
                           placeholder="请选择所属用户">
                    <input type="hidden" id="userId" name="userId">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">名称</div>
                <div class="aui-list-item-inner  ">
                    <input type="text" id="name" name="name" maxlength="10" placeholder="请输入收款码名称">
                </div>
            </div>
        </li>
    </ul>
</section>

<section class="aui-content" style="margin-top: 14px; padding-left: 20px; padding-right: 20px;">
    <p>
    <button id="submitBtn" class="aui-btn aui-btn-info  aui-btn-block" onclick="createQrCode()" style="border:0px;">一键生成收款码</button>
    </p>
</section>

<!-----------------请选择所属用户-----弹层---------------->
<div>
    <div class="weui-mask" id="iosNdMask" style="display: none"></div>
    <div class="weui-actionsheet" id="iosNdActionsheet">
        <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">请选择所属用户</p>
        </div>
        <div style="overflow-y:scroll;max-height:200px;">
            <c:forEach items="${cashierslist}" var="cashiers">
                <div class="weui-actionsheet__menu">
                    <div class="weui-actionsheet__cell colorPrimary"
                         cashiersId="${cashiers.id}">${cashiers.name}/${cashiers.mobilephone}</div>
                </div>
            </c:forEach>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosNdActionsheetCancel">取消</div>
        </div>
    </div>
</div>

<!-----------------请选择所属用途-----弹层---------------->
<div>
    <div class="weui-mask" id="iosMask" style="display: none"></div>
    <div class="weui-actionsheet" id="iosActionsheet">
        <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">请选择所属用途</p>
        </div>
        <div style="overflow-y:scroll;max-height:200px;">
            <c:forEach items="${bankInfoList}" var="bankInfo">
                <div class="weui-actionsheet__menu">
                    <div class="weui-actionsheet__cell bankInfoPrimary" bankInfoId="${bankInfo.id}">${bankInfo.bankName}/${bankInfo.bankCard}</div>
                </div>
            </c:forEach>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
        </div>
    </div>
</div>
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessage"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefault">确定</a>
            </div>
        </div>
    </div>
</div>
<!-----------------请选择所属用户-----弹层---------------->
<script type="text/javascript">
    //请选择所属用户
    var $iosNdActionsheet = $('#iosNdActionsheet');
    var $iosNdMask = $('#iosNdMask');

    function hideNdActionSheet() {
        $iosNdActionsheet.removeClass('weui-actionsheet_toggle');
        $iosNdMask.fadeOut(200);
    }

    $iosNdMask.on('click', hideNdActionSheet);
    $('#iosNdActionsheetCancel').on('click', hideNdActionSheet);
    $("#namePhone").on("click", function () {
        $iosNdActionsheet.addClass('weui-actionsheet_toggle');
        $iosNdMask.fadeIn(200);
    });
    $(".colorPrimary").on("click", function () {
        var cashiersId = $(this).attr("cashiersId");
        var namePhone = $(this).text();
        $("#namePhone").val(namePhone);
        $("#userId").val(cashiersId);
        hideNdActionSheet();
    });

    ///请选择所属用途
    var $iosActionsheet = $('#iosActionsheet');
    var $iosMask = $('#iosMask');

    function hideActionSheet() {
        $iosActionsheet.removeClass('weui-actionsheet_toggle');
        $iosMask.fadeOut(200);
    }

    $iosMask.on('click', hideActionSheet);
    $('#iosActionsheetCancel').on('click', hideActionSheet);
    $("#bankNamePhone").on("click", function () {
        $iosActionsheet.addClass('weui-actionsheet_toggle');
        $iosMask.fadeIn(200);
    });
    $(".bankInfoPrimary").on("click", function () {
        var bankId = $(this).attr("bankInfoId");
        var bankNamePhone = $(this).text();
        $("#bankNamePhone").val(bankNamePhone);
        $("#bankId").val(bankId);
        hideActionSheet();
    });

    //错误提示弹框
    var $iosDialog2 = $('#iosDialog2');
    $('#dialogs').on('click', '.DeleteDefault', function () { //取消按钮事件
        $(this).parents('.js_dialog').fadeOut(200);
    });


    function createQrCode() {
        var name = $("#name").val();//请输入收款码名称
        var namePhone = $("#namePhone").val();//请选择所属用户
        var bankNamePhone = $("#bankNamePhone").val();//请选择所属用途
        if (bankNamePhone.trim() == null || bankNamePhone.trim() == "" || bankNamePhone.trim() == "请选择所属用途") {
            $("#DialogMessage").html("请选择所属用途!");
            $iosDialog2.fadeIn(200);
            return;
        }
        if (namePhone.trim() == null || namePhone.trim() == "" || namePhone.trim() == "请选择所属用户") {
            $("#DialogMessage").html("请选择所属用户!");
            $iosDialog2.fadeIn(200);
            return;
        }
        if (name.trim().length == 0) {
            $("#DialogMessage").html("请输入收款码名称!");
            $iosDialog2.fadeIn(200);
            return;
        }
        var bankId = $("#bankId").val();
        var userId = $("#userId").val();
        
        $("#submitBtn").attr("disabled","disabled");
        //$.toast(name+"==="+userId+"==="+bankId, "cancel");
        $.ajax({
            type: "POST",
            url: "../auth/createQrCode",
            data: {
                name: name,
                userId: userId,
                bankId: bankId
            },
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    location.href = "../auth/viewQRCode";
                } else {
                    $("#DialogMessage").html("" + result.msg);
                    $iosDialog2.fadeIn(200);
                }
                $("#submitBtn").removeAttr("disabled");
            }
        });
    }
</script>

</body>
</html>